import { Query } from '@/lib/ES6-Query.js'
import { ref } from 'vue'

const searchText = ref('')
var sourceSearch
var layerSearch
const data = ref({})
const isShowPopup = ref(false)
const handleSearch = (map) => {
  if (searchText.value == '') {
    isShowPopup.value = false
    return
  } else {
    isShowPopup.value = true
    // 定义显示查询结果的空数据源
    sourceSearch = new ol.source.Vector({ wrapX: false })
    // 定义显示查询结果的空图层
    layerSearch = new ol.layer.Vector({
      source: sourceSearch,
      style: new ol.style.Style({
        image: new ol.style.Icon({
          anchor: [0.5, 20],
          anchorOrigin: 'bottom-right',
          anchorXUnits: 'fraction',
          anchorYUnits: 'pixels',
          offsetOrigin: 'top-right',
          scale: 0.3,
          opacity: 1,
          //图标的url
          src: '../../src/assets/images/local.png'
        })
      })
    })
    map.addLayer(layerSearch)


    var where = `事件类型='${searchText.value}'`
    var service = { name: 'guanggu', layerId: 2 }
    // 调用属性查询的函数
    Query.queryByAttr({ where, service, callback: querySuccess })

    function querySuccess(res) {
      sourceSearch.clear()
      var format = new Zondy.Format.PolygonJSON()
      var features = format.read(res)
      sourceSearch.addFeatures(features)

      // ⭐创建 Overlay 的类
      var container = document.getElementById('S_popup')
      var content = document.getElementById('S_popup-content')
      var closer = document.getElementById('S_popup-closer')

      var popup = new ol.Overlay({
        //要转换成overlay的HTML元素
        element: container,
        //当前窗口可见
        autoPan: true,
        //Popup放置的位置
        positioning: 'bottom-center',
        //是否应该停止事件传播到地图窗口
        stopEvent: false,
        autoPanAnimation: {
          //当Popup超出地图边界时，为了Popup全部可见，地图移动的速度
          duration: 250
        }
      })
      map.addOverlay(popup)

      // 4、事件监听
      closer.onclick = function () {
        //未定义popup位置
        popup.setPosition(undefined)
        //失去焦点
        closer.blur()
        return false
      }

      map.on('click', function (evt) {
        //判断当前单击处是否有要素，捕获到要素时弹出popup
        var feature = map.forEachFeatureAtPixel(
          evt.pixel,
          function (feature, layer) {
            return feature
          }
        )
        if (feature) {
          var obj = feature.values_.values_
          if (obj.事件等级 == '0') {
            obj.事件等级 = '轻微事故'
          } else if (obj.事件等级 == '1') {
            obj.事件等级 = '一般事故'
          } else if (obj.事件等级 == '2') {
            obj.事件等级 = '较大事故'
          } else if (obj.事件等级 == '3') {
            obj.事件等级 = '严重事故'
          } else if (obj.事件等级 == '4') {
            obj.事件等级 = '特别重大事故'
          }
          data.value = obj
          if (popup.getPosition() == undefined) {
            //设置popup的位置, 此时还未打开过popup弹窗
            var position = feature.getGeometry().getCoordinates()[0]
            popup.setPosition(position)
          } else {
            // 如果feature的为新点击的对象, 则赋予popup新的显示位置
            var position = feature.getGeometry().getCoordinates()[0]
            popup.setPosition(position)
          }
        }
      })

      map.on('pointermove', function (e) {
        var pixel = map.getEventPixel(e.originalEvent)
        var hit = map.hasFeatureAtPixel(pixel)
        map.getTargetElement().style.cursor = hit ? 'pointer' : ''
      })

      var iconFeature = new ol.Feature({
        geometry: new ol.geom.Point([114, 30])
      })

      var vectorSource = new ol.source.Vector({
        features: [iconFeature]
      })
      var vectorLayer = new ol.layer.Vector({
        source: vectorSource
      })
      map.addLayer(vectorLayer)
    }
  }
}

export { searchText, data, isShowPopup, handleSearch }